﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>canvas</title>
        <script src="../script/global/bin/need.js" ></script>
        <script type="text/javascript" src="../script/global/born/util/util.js" ></script>
        <script src="../script/global/born/canvas/canvas.js" ></script>
        <style>
        	#lCanvas{
				border:1px solid rgb(50,50,50);
				border-radius:5px;
				width:1500px;
				height:600px;
				box-shadow:0 0 5px rgba(0,0,0,.5);
				margin:20px auto;
			}
        </style>
	</head>
	<body>
		<canvas id='lCanvas'></canvas>
		<script type='text/javascript' >
        	(function(w){
				
				var animate = need('animate') ;
				var getPixel = need('getPixel') ;
				var util = need('util') ;
				
				var cvs = document.getElementById('lCanvas') ;
				var cxt = cvs.getContext('2d') ;
				cvs.width = 1500 ;
				cvs.height = 600 ;  
				
				var pixel = getPixel('贝贝网',300) , nPixel = [] , sPixel = util.copy(pixel) ; 
				var j = 0 , x = 0 , y = 0 , oX = 300 , oY = 100 ,isFinish = false ;
				var Ball = function(x,y,target){
					this.count = 10 ;
					this.current = 0 ;
					this.x = x ;
					this.y = y ;
				} ;
				Ball.prototype.update = function(target){
					this.x += ( target[0] -this.x ) / this.count ;
					this.y += ( target[1] -this.y ) / this.count ;
				} ;
				Ball.prototype.draw = function(){
					cxt.beginPath();
					cxt.arc( this.x , this.y , 6 , 0 , Math.PI*2 , true );
					cxt.shadowBlur = 5;
					cxt.shadowColor = "rgba(0,0,0,.5)";
					cxt.closePath();	
					cxt.fill();
				} ;
				
				
				for(var i = 0 ; i < pixel.length ; i++ ){
					nPixel.push(new Ball(Math.random()*cvs.width,Math.random()*cvs.height)) ;	
				}
				
				
				animate.start(function(){
					cvs.width = cvs.width ;
					for(var i = 0 ; i < nPixel.length ; i++ ){
						nPixel[i].update([pixel[i][0]+oX,pixel[i][1]+oY]);
						nPixel[i].draw();
					}
				}) ;
				
				window.setInterval(function(){
					
					if(!isFinish){
						for(var i = 0 ; i < pixel.length ; i++ ){
							pixel[i][0] = Math.random()*cvs.width - oX ;
							pixel[i][1] = Math.random()*cvs.height - oY ;
						}
						isFinish = true ;
					} else {
						pixel = util.copy(sPixel);
						isFinish = false ;
					}
					
				},2500) ;
				
			}(window)) ;
        </script>
    </body>
</html>
